<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 奖项审核
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <!-- <el-button
                type="danger"
                icon="el-icon-delete"
                class="handle-del mr10"
                @click="delAllSelection"
                :disabled="isDisabled"
                >删除</el-button> -->
				<!-- <el-button
                    type="primary"
                    icon="el-icon-circle-plus-outline"
                    class="handle-del mr10"
                    @click="handleAdd"
                >添加</el-button> -->
                <el-input v-model="query.nickname" placeholder="请输入姓名" class="handle-input mr10"></el-input>
                <el-button 
                    type="primary"
                    icon="el-icon-search"
                    class="handled-del mr10"
                    @click="handleSearch"
                >搜索</el-button>
                 <el-select v-model="query.state" class="handle-select mr10" placeholder="状态" @change="stateChange">
                    <el-option
                    v-for="item in stateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="query.awardsId" class="handle-select mr10" placeholder="类型" @change="awardsChange">
                    <el-option
                    v-for="item in awardsOptinos"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="query.classId" class="handle-select mr10" placeholder="班级" @change="classChange">
                    <el-option
                    v-for="item in classOptinos"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="query.pass" class="handle-select mr10" placeholder="请选择" @change="passChange">
                    <el-option
                    v-for="item in passOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="query.result" class="handle-select mr10" placeholder="体测成绩" @change="resultChange">
                    <el-option
                    v-for="item in resultOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                 <el-select v-model="query.ranking" class="handle-select mr10" placeholder="排名" @change="rankingChange">
                    <el-option
                    v-for="item in rankingOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-button 
                    type="primary"
                    icon="el-icon-refresh"
                    class="handled-del mr10"
                    @click="handleReset"
                >重置</el-button>
                 <el-date-picker
                    class="handle-date mr10"
                    v-model="date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="dateChange"
                    value-format="yyyy-MM-dd">
                    </el-date-picker>


            </div>
            <el-table
                v-loading="loading2"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0,0,0,0.8)"
                :data="tableList"
                border
                
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column type="userId"  align="center" v-if="show"></el-table-column>
                <el-table-column type="awardsId"  align="center" v-if="show"></el-table-column>
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="nickname" label="姓名" align="center" width="100"></el-table-column>
                <el-table-column prop="number" label="学号" align="center" width="120"></el-table-column>
                <el-table-column prop="gender" label="性别" align="center" width="80">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.gender===0" type="success">男</el-tag>
                        <el-tag v-else type="warning">女</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="className" label="班级" width="150" align="center"></el-table-column>
                <el-table-column prop="phone" label="手机" align="center" width="120"></el-table-column>
                <el-table-column prop="awardsName" label="申请奖项" width="120" align="center"></el-table-column>
                <el-table-column prop="pass" label="不良记录" align="center" width="80">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.pass===0" type="success">无</el-tag>
                        <el-tag v-else type="danger">有</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="ranking" label="积点排名" align="center" width="80"></el-table-column>
                <el-table-column prop="result" label="体测成绩" align="center" width="80"></el-table-column>
                <el-table-column prop="createTime" label="申请时间" width="180" align="center"></el-table-column>
                <el-table-column prop="state" label="状态" align="center" width="80">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state===0" type="success">通过</el-tag>
                        <el-tag v-else-if="scope.row.state===1" type="danger">未通过</el-tag>
                        <el-tag v-else-if="scope.row.state===2" type="warning">待审核</el-tag>
                    </template>
                </el-table-column>  
                <el-table-column label="操作" width="350"  align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="success round"
                            @click="handlePass(scope.$index, scope.row)"
                        >审核</el-button>
                        <el-button
                            type="warning round"
                            @click="handleRefuse(scope.$index, scope.row)"
                        >拒绝</el-button>
                        <el-button
                            type="primary round"
                            @click="handleDownload(scope.$index, scope.row)"
                        >下载</el-button>
                        <el-button
                            type="danger round"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>



    </div>
    
</template>

<script>
import {selectApplyList,checkNum,updateState,deleteApply,refuse} from "@/api/apply.js";
import{selectClassByUserId,selectAllAwards} from "@/api/classAwards.js";
import Qs from  'qs' 

export default {
    name: 'apply',
    data() {
        return {
            show:false,
            date: '',
            //查询参数
            query: {
                nickname:'',
                awardsId:null,
                classId:null,
                userId:null,
                state:null,
                pass:null,
                ranking:null,
                result:null,
                startDate:'',
                endDate:'',
                pageIndex: 1,
                pageSize: 10,
            },
            //新增or编辑弹框标题(根据点击的新增or编辑按钮显示不同的标题)
            titleMap: {
                add:'添加',
                edit: '审核'
            },
            //用户文件
            userExcelFile:null,
            //上传文件dialog
            excelVisible:false,
            //判断是否为编辑操作，使用户名框不可修改
            unDisabled:false,
            //密码框是否禁用
            pwdDisabled:false,
            //新增和编辑弹框标题
            dialogstate: "",
            // 遮罩层
            loading2: false,
            //表格数据
            tableData: [],

            //表格
            tableList:[],
            //
            flag:true,

            classOptinos:[],
            //荣誉类型
            awardsOptinos:[],
            resultOptions:[
                {value: '90',label: '90'},
                {value: '80',label: '80'},
                {value: '70',label: '70'},
                {value: '60',label: '60'},
                {value: '50',label: '50'},
            ],
            rankingOptions: [
                {value: '1',label: '1'},
                {value: '2',label: '2'},
                {value: '3',label: '3'},
                {value: '4',label: '4'},
                {value: '5',label: '5'},
                {value: '6',label: '6'},
                {value: '7',label: '7'},
                {value: '8',label: '8'},
                {value: '9',label: '9'},
                {value: '10',label: '10'},
                {value: '11',label: '11'},
                {value: '12',label: '12'},
                {value: '13',label: '13'},
                {value: '14',label: '14'},
                {value: '15',label: '15'},
                {value: '16',label: '16'},
                {value: '17',label: '17'},
                {value: '18',label: '18'},
                {value: '19',label: '19'},
                {value: '20',label: '20'},
            ],
            // 状态
            stateOptions: [
                {value: null,label: '请选择状态'},
                {value: '0',label: '通过'},
                {value: '1',label: '未通过'},
                {value: '2',label: '待审核'},
            ],
            flag1:false,
            passOptions: [
                {value: null,label: '请选择'},
                {value: '0',label: '无'},
                {value: '1',label: '有'},
            ],
            // typeOptions: [
            //     {value: null,label: '请选择'},
            //     {value: '0',label: '正常'},
            //     {value: '1',label: '停用'},
            // ],
            // 用户性别
            sexOptions: [
                {value: '0',label: '男'}, 
                {value: '1',label: '女'}, 
            ],
            msg:'',
            // 批量删除按钮是否可以点击
            isDisabled: true,
            timer:'',
            // 存放批量删除用户
            multipleSelection: [],
            //编辑框是否显示
            dialogFormVisible:false,
            //列表总数
            pageTotal: 0,
            form: {
                nickname:'',
                gender:'',
                number:null,
                gender:null,
                className:'',
                phone:'',
                awardsName:'',
                state:null,
                pass:null,
                ranking:null,
                result:null,
            },
        };
    },
    watch: {
        // 监听最后一页删除最后一条数据时，当前页不变情况
        pageTotal(){
            if(this.pageTotal==(this.query.pageIndex-1)*this.query.pageSize && this.pageTotal!=0){
                this.query.pageIndex-=1;
                this.getData();
            }
        }
    },
    created() {
        //获取数据列表
		this.getData()
        this.getClass();
        this.getAwards();
    },
    mounted(){

    },
    methods: {

        //在线预览
        handlePreview(index,row){

        },
        //下载附件
        handleDownload(index,row){
            console.log(row);
            this.downloadFile(row.userId,row.awardsId);
        },

        // async sleep(d) {
        //         return new Promise((resolve) => setTimeout(resolve, d))
        //     },

        handleRefuse(index,row){
            if(row.state == 0){
                this.$message('已通过审核');
            }
            else if(row.state == 1){
                this.$message('已拒绝通过');
            }else {
                const _this = this;
            const awardsId = row.awardsId;
            const userId = row.userId;
            this.$confirm('确定拒绝通过吗？', '提示', {
                type: 'warning'
            }).then(() => {
                refuse(userId,awardsId).then(res=>{
                        this.$message.error('已拒绝通过');
                        this.getData()
                        })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            })
            }
        },
        //审核
         handlePass(index,row){
            if(row.state == 0){
                this.$message('已通过审核,无需审核');
            }
            else if(row.state == 1){
                this.$message('已拒绝通过');
            }
            else {
            const _this = this;
            const awardsId = row.awardsId;
            const userId = row.userId;
            this.$confirm('确定审批通过吗？', '提示', {
                type: 'warning'
            }).then(() => {
                    checkNum(userId,awardsId).then(res=>{
                        
                        if(res.code === 400){
                            this.$message(res.message);
                        }
                        else if(res.code === 200){
                            this.msg = res.message;
                            //this.flag1 = true;
                            updateState(userId,awardsId).then(res=>{
                                console.log("ress:"+res);
                                this.$message.success('审核通过,'+_this.msg);
                                this.getData()
                            })
                        }
                    })
               

                
               

                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            }).catch(err=>{
                console.log(err)
            })
            }
            
        },
        getClass(){
            const _this = this;
            let userInfo = localStorage.getItem("userInfo");
            let user = JSON.parse(userInfo);
            const userId = user.userId;
            selectClassByUserId(userId).then((res)=>{
                console.log(res);
                let classes = res.data;

                _this.classOptinos =  classes.map((item) => {
                    //组装，只需要id和name
                    return { value: item.classId,label: item.className };
                });
            })
        },

        //获得所有类型
        getAwards(){
            const _this = this;
            selectAllAwards().then((res)=>{
                let type = res.data;
                _this.awardsOptinos =  type.map((item) => {
                    //组装，只需要id和name
                    return { value: item.awardsId,label: item.awardsName };
                });
            })
        },

   

        

		//获取列表数据
		  getData(){
            const userInfo = localStorage.getItem("userInfo");
            const user = JSON.parse(userInfo);
            this.query.userId = user.userId;
            const _this = this
            this.loading2 = true
            selectApplyList(this.query).then((res)=>{
			    console.log(res)
			    _this.tableList = res.data.records;
                _this.pageTotal = res.data.total;
            }).catch((err) => {
			        console.log('请求失败'+err)
			    });

            this.loading2 = false;
        },

        // 删除操作
        handleDelete(index,row) {
            // 二次确认删除
            const _this = this
            const awardsId = row.awardsId;
            const userId = row.userId;
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                    deleteApply(userId,awardsId).then(res=>{
                        this.$message.success('删除成功');
                        _this.getData()
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            }).catch(err=>{
                console.log('删除失败'+err)
            })
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
            if(this.multipleSelection.length === 0){
                this.isDisabled = true;
            }else{
                this.isDisabled = false;
            }
        },

        handleReset(){
            this.query.awardsId = null;
            this.query.classId = null;
            this.query.nickname = '';
            this.query.state = null;
            this.query.pass = null;
            this.query.ranking = null;
            this.query.result = null;
            this.getData();
        },
        //搜索
        handleSearch(){
            this.$set(this.query,'pageIndex',1);
            this.getData();
        },

      
        // 用户状态下拉改变
        stateChange(){
            this.getData();
        },
        // 班级下拉改变
        classChange(){
            this.getData();
        },
        passChange(){
            this.getData();
        },
        rankingChange(){
            this.getData();
        },
        resultChange(){
            this.getData();
        },
        // 荣誉类型下拉改变
        awardsChange(){
            this.getData();
        },
        // 用户注册日期改变
        dateChange(){
            if(this.date != null){
                this.query.startDate = this.date[0];
                this.query.endDate = this.date[1];
            }else{
                 this.query.startDate = '';
                this.query.endDate = '';
            }
            this.getData();
        },
        
        //批量删除
        delAllSelection() {
            const _this = this;
            this.$confirm('确定要删除吗?','提示',{
                type: 'warning'
            }).then(()=>{
                const length = _this.multipleSelection.length;
                let ids = '';
                for(let i = 0;i<length-1;i++){
                     ids+=_this.multipleSelection[i].honorId+','
                }
                ids += _this.multipleSelection[length-1].honorId;
                deleteHonors(ids).then(res=>{
                _this.$message.success(res.message);
                _this.multipleSelection = [];
                _this.getData();
            }).catch(err=>{
                console.log("出错了"+err)
            })
            })
        },
        // 分页导航
        handlePageChange(pageIndex){
            this.query.pageIndex = pageIndex
            this.getData();
        },
        //表单重置
        resetForm(){

            this.form = {
                nickname: undefined,
                number: undefined,
                honorType:undefined,
                state: null,
                classId:undefined,
                //className: undefined,
            }
            this.$nextTick(()=>{
                this.$refs.form.resetFields();
            })
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
